<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style>
		body {
		  background-color:#1d1d1d;
		  font-family: "Asap", sans-serif;
		  color:#989898;
		  margin:0 10px;
		  font-size:16px;
		}
		
		h1, h2, h3 {
		  font-family: "Signika Negative", sans-serif;
		  margin: 10px 0 10px 0;
		  color:#f3f2ef;
		}
		
		h1 { 
		  font-size:36px;
		}
		
		h2 {
		  font-size:30px;
		}
		
		h3 {
		  font-size:24px;
		}
		
		p{
		  line-height:22px;
		  margin-bottom:16px;
		  width:650px;
		}
		
		#demo {
		  position:relative;
		}
		.box {
		  width:50px;
		  height:50px;
		  position:relative;
		  border-radius:6px;
		  margin:4px;
		  display:inline-block;
		  background:grey;
		}
		.green{
		  background-color:#6fb936;
		}
		.orange {
		  background-color:#f38630;
		}
		.grey {
		  background-color:#989898;
		}
	</style>
</head>
<body>
	
	<h2>TweenMax.staggerFromTo() with cycle</h2>
	<div id="demo">
	  <p>cycle属性允许你在所有TweenMax、TimelineLite和 TimelineMax插件中基于stagger的函数里面，定义一个array的属性值或者function的属性值 (注释中有详细列表)。</p>
	   
	  <div class="box"></div>
	  <div class="box"></div>
	  <div class="box"></div>
	  <div class="box"></div>
	  <div class="box"></div>
	  <div class="box"></div>
	  <div class="box"></div>
	  <div class="box"></div>
	</div>
	
	<script src="TweenMax.min.js"></script>
	<script>
		TweenMax.staggerFromTo(".box", 1, {
			// from 起点
		  cycle:{
		    //an array of values
		    backgroundColor:["red", "white", "#00f"],
		    //function that returns a value
		    y:function(index){
		      return index * 10;
		    }
		  }
		},
		  
		  // to 终点
		 {
		  cycle:{
		    //an array of values
		    backgroundColor:["green", "orange", "pink"],
		    //function that returns a value
		    y:function(){
		      return (Math.random() * 100) + 20;
		    }
		  }
		  
		}, 0.5);
	</script>
</body>
</html>